<template>
    <div>
        <div>
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>等级</th>
                        <th>最大值</th>
                        <th>最小值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>A</td>
                        <td>100</td>
                        <td>80</td>
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>80</td>
                        <td>60</td>
                    </tr>
                    <tr>
                        <td>C</td>
                        <td>60</td>
                        <td>40</td>
                    </tr>
                    <tr>
                        <td>D</td>
                        <td>40</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>E</td>
                        <td>20</td>
                        <td>0</td>
                    </tr>
                </tbody>
            </table>
            <br /><br /><br /><br />
            <div style="text-align: center;">
                <el-button>重置</el-button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">

</script>
<style scoped>
.custom-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-table th,
.custom-table td {
    padding: 12px;
    font-size: 16px;
    text-align: center;
    /* 居中对齐 */
}

.custom-table th {
    background-color: #10bdd7;
    color: white;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}
</style>
